// import Channel from "./components/Channel"
// import ArticleList from "./components/ArticleList"
// import {
//   BrowserRouter as Router,
//   Route,
//   Switch,
//   NavLink,
// } from "react-router-dom"
// import Login from "./pages/Login"
// import Home from "./pages/Home"
// import Publish from "./pages/Publish"
// function App() {
//   return (
//     <Router>
//       <ul>
//         <li>
//           {/* 模糊匹配原则 */}
//           {/* exact表示精确匹配 只能在 to属性和地址栏pathname 完全相同的情况 才会激活标签 */}
//           <NavLink exact to="/home/index/a">
//             首页
//           </NavLink>
//         </li>
//         <li>
//           <NavLink to="/login">登陆页</NavLink>
//         </li>
//         <li>
//           <NavLink to="/publish">发布页面</NavLink>
//         </li>
//       </ul>
//       <div
//         style={{
//           width: 500,
//           height: 500,
//           margin: "0 auto",
//           border: "1px solid",
//         }}
//       >
//         {/* 只会渲染满足条件第一个路由 */}
//         <Switch>
//           <Route exact path="/">
//             我是初始页
//           </Route>
//           <Route path="/home" component={Home}></Route>
//           <Route path="/home/index">
//             <div>我是第二个匹配的组件</div>
//           </Route>
//           <Route path="/home/index/a">
//             <div>我是第三个匹配的组件</div>
//           </Route>
//           <Route path="/login" component={Login}></Route>
//           <Route path="/publish">
//             <Publish></Publish>
//           </Route>
//           {/* 不给path属性- 满足所有的匹配 */}
//           <Route>404</Route>
//         </Switch>
//       </div>

//       {/* <div className="App">
//         <Channel />
//         <ArticleList />
//       </div> */}
//     </Router>
//   )
// }

// export default App
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch,
} from "react-router-dom"
import Login from "./pages/Login"
import Home from "./pages/Home"
const App = () => {
  return (
    <Router>
      <div>
        <h2>
          <NavLink to="/login">登陆页</NavLink>
        </h2>
        <h2>
          <NavLink to="/home">首页</NavLink>
        </h2>
      </div>
      <div
        style={{
          width: 800,
          height: 800,
          margin: "20px auto",
          border: "1px solid pink",
        }}
      >
        {/* 路由 */}
        <Switch>
          <Route path="/login">
            <Login></Login>
          </Route>
          <Route path="/home">
            <Home></Home>
          </Route>
          <Route>404</Route>
        </Switch>
      </div>
    </Router>
  )
}
export default App
